<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:head>
		<title>Image-less CSS3 Glowing Form Implementation</title> 
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
		
		<script>
			$(function(){
			  var $form_inputs =   $('form input');
			  var $rainbow_and_border = $('.rain, .border');
			  /* Used to provide loping animations in fallback mode */
			  $form_inputs.bind('focus', function(){
			  	$rainbow_and_border.addClass('end').removeClass('unfocus start');
			  });
			  $form_inputs.bind('blur', function(){
			  	$rainbow_and_border.addClass('unfocus start').removeClass('end');
			  });
			  $form_inputs.first().delay(800).queue(function() {
				$(this).focus();
			  });
			});
			
		</script>
		
		<style>
			body {
				background-image: url(../css/blue_apple-1366x768.jpg);
				background-repeat: no-repeat;
				background-size: 100%;
				font-family: sans-serif, 'Arial', 'Helvetica', 'Lucida Grande';
				text-shadow: 0 1px 0 #F5F5F5;
			}

			.border,.rain {
				height: 170px;
				width: 320px;
			}
			
			/********* Layout with mask - MODIFICADO ******/
			.rain {
				opacity: .7;
				border-radius: 6px;
				padding: 10px 13px 13px 10px;
				-moz-box-shadow: 7px 7px 8px rgba(97, 97, 97, 1) inset, -7px -7px 8px rgba(97, 97, 97, 1) inset;
				-webkit-box-shadow: 7px 7px 8px rgba(97, 97, 97, 1) inset, -7px -7px 8px rgba(97, 97, 97, 1) inset;
				box-shadow: 7px 7px 8px rgba(97, 97, 97, 1) inset, -7px -7px 8px rgba(97, 97, 97, 1) inset;
				margin: 220px auto;
			}
			
			/* Artifical "border" to clear border to bypass mask */
			.border {
				padding: 1px;
				X-moz-border-radius: 5px;
				X-webkit-border-radius: 5px;
				Xborder-radius: 5px;
			}

			.border,
			.rain,
			.border.start,
			.rain.start {
				background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
				background-position: 0 0, 0 0, 0 0, 0 0;
				
				/* Blue-ish Green Fallback for Mozilla */
				background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
				
				/* Add "Highlight" Texture to the Animation */
				background-image: -webkit-gradient(linear, left top, right top, color-stop(1%, rgba(0, 0,
					0, .3) ), color-stop(23%, rgba(0, 0, 0, .1) ),
					color-stop(40%, rgba(255, 231, 87, .1) ),
					color-stop(61%, rgba(255, 231, 87, .2) ),
					color-stop(70%, rgba(255, 231, 87, .1) ),
					color-stop(80%, rgba(0, 0, 0, .1) ),
					color-stop(100%, rgba(0, 0, 0, .25) ) );
				
				/* Starting Color */
				background-color: #39f;

				/* Just do something for IE-suck */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BA1B', endColorstr='#00BA1B', GradientType=1 );
			}

			/* Non-keyframe fallback animation */
			.border.end,
			.rain.end {
				-moz-transition-property: background-position;
				-moz-transition-duration: 30s;
				-moz-transition-timing-function: linear;
				-webkit-transition-property: background-position;
				-webkit-transition-duration: 30s;
				-webkit-transition-timing-function: linear;
				-o-transition-property: background-position;
				-o-transition-duration: 30s;
				-o-transition-timing-function: linear;
				transition-property: background-position;
				transition-duration: 30s;
				transition-timing-function: linear;
				background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;
			}

			/* Keyfram-licious animation */
			@
			-webkit-keyframes colors { 
			
				0% {
					background-color: #39f;
				}
	
				15%	{
					background-color: #F246C9;
				}
				
				30% background-color: #4453F2;
				}
				
				45% {
					background-color: #44F262;
				}
				
				60% {
					background-color: #F257D4;;
				}
				
				75% {
					background-color: #EDF255;
				}
				
				90% {
					background-color: #F20006;
					
				} 
				
				100% {
					background-color: #39f;
				}
			}
			
			.border,
			.rain {
				-webkit-animation-direction: normal;
				-webkit-animation-duration: 20s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-name: colors;
				-webkit-animation-timing-function: ease;
			}

			/********* In-Active State Style - MODIFICADO ********/
			.border.unfocus {
				Xbackground: #333 !important;
				-moz-box-shadow: 0px 0px 15px rgba(255, 255, 255, .2);
				-webkit-box-shadow: 0px 0px 15px rgba(255, 255, 255, .2);
				box-shadow: 0px 0px 15px rgba(255, 255, 255, .2);
				-webkit-animation-name: none;
			}
			
			/******* MODIFICADO *******/
			.rain.unfocus {
				Xbackground: #000 !important;
				X-webkit-animation-name: none;
			}

			/* Regular Form Styles */
			form {
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				height: 100%;
				width: 100%;
				Xbackground: -moz-radial-gradient(50% 46% 90deg, circle closest-corner, #242424, #090909);
				Xbackground: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
				Xbackground: #212121;
			}

			form label {
				display: block;
				padding: 10px 10px 5px 15px;
				font-size: 14px;
				color: #1F1F1F;
				font-weight: bold;	
			}

			form input {
				display: block;
				margin: 5px 10px 10px 15px;
				border-radius: 8px;
				width: 85%;
				background: #363636;
				-moz-box-shadow: 0px 0px 4px #000 inset;
				-webkit-box-shadow: 0px 0px 4px black inset;
				box-shadow: 0px 0px 4px black inset;
				Xoutline: 1px solid #333;
				Xborder: 1px solid #A2A2A2;
				padding: 5px;
				color: #444;
				font-size: 14px;
			}

			form input:focus {
				outline: 1px solid #555;
				color: #FFF;
			}

			input[type="submit"] {
				color: #999;
				padding: 5px 10px;
				float: right;
				margin: 20px 0;
				border: 1px solid #000;
				font-weight: lighter;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
				border-radius: 15px;
				background: #45484d;
				background: -moz-linear-gradient(top, #222 0%, #111 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222), color-stop(100%, #111) );
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111', GradientType=0 );
				-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255, 255, 255, .3) inset;
				-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255, 255, 255, .3) inset;
				box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255, 255, 255, .3) inset;
				text-shadow: 0 1px 1px #000;
			}
			
			.form_login {
				background: #8F8F8F linear-gradient(top, rgba(221, 221, 221, 0.8), rgba(180, 180, 180, 0) );
				background: #8F8F8F -webkit-gradient(linear, left top, left bottom, from( rgba(221, 221, 221, 0.8) ), to( rgba(180, 180, 180, 0) ) );
				background: #8F8F8F -moz-linear-gradient(top, rgba(221, 221, 221, 0.8), rgba(180, 180, 180, 0) );
				box-shadow: 0px 1px 1px #A0A0A0, 0px 1px 0px rgba(255, 255, 255, 0.3) inset;
				border: 1px solid white;
				Xopacity: 0.60;
				X-moz-opacity: 1;
				Xfilter: alpha(opacity = 0.60);
			}
		</style>

	</h:head>

	<h:body id="home">
		<div class="rain unfocus start">
			<div class="border unfocus start">
				<form class="form_login">
					<label for="email">Usuário: </label> 
					<h:inputText id="input_usuario"/>
					<p:watermark for="input_usuario" value="Digite seu usuário" /> 
					
					<label for="pass">Senha</label> 
					<h:inputSecret id="input_senha"/>
					<p:watermark for="input_senha" value="Digite sua senha" /> 
				</form>
			</div>
		</div>
	</h:body>
</html>